<template>
  <div class="user-dashboard">
    <div class="dashboard-header">
      <h1 class="dashboard-title">用户信息综合分析</h1>
      <p class="dashboard-subtitle">全面展示用户数据概览与趋势分析</p>
    </div>

    <!-- 用户概览卡片 -->
    <div class="overview-cards">
      <div class="card">
        <div class="card-icon">👥</div>
        <div class="card-content">
          <div class="card-value">{{ totalUsers }}</div>
          <div class="card-label">总用户数</div>
        </div>
      </div>
      
      <div class="card">
        <div class="card-icon">📱</div>
        <div class="card-content">
          <div class="card-value">{{ activeUsers }}</div>
          <div class="card-label">活跃用户</div>
        </div>
      </div>
      
      <div class="card">
        <div class="card-icon">⏰</div>
        <div class="card-content">
          <div class="card-value">{{ avgActivityRate }}%</div>
          <div class="card-label">平均活跃度</div>
        </div>
      </div>
      
      <div class="card">
        <div class="card-icon">🌍</div>
        <div class="card-content">
          <div class="card-value">{{ userGrowthRate }}%</div>
          <div class="card-label">月增长率</div>
        </div>
      </div>
    </div>

    <!-- 数据可视化图表 -->
    <div class="charts-container">
      <!-- 性别比例 -->
      <div class="chart-card">
        <h2 class="chart-title">用户性别分布</h2>
        <div class="chart-container">
          <v-chart :options="genderPieOptions" class="chart" />
        </div>
      </div>

      <!-- 年龄分布 -->
      <div class="chart-card">
        <h2 class="chart-title">用户年龄分布</h2>
        <div class="chart-container">
          <v-chart :options="ageBarOptions" class="chart" />
        </div>
      </div>

      <!-- 活跃度趋势 -->
      <div class="chart-card">
        <h2 class="chart-title">用户活跃度趋势</h2>
        <div class="chart-container">
          <v-chart :options="activityLineOptions" class="chart" />
        </div>
      </div>

      <!-- 用户地域分布 -->
      <div class="chart-card">
        <h2 class="chart-title">用户地域分布</h2>
        <div class="chart-container">
          <v-chart :options="regionMapOptions" class="chart" />
        </div>
      </div>
    </div>

    <!-- 用户详情表格 -->
    <div class="table-container">
      <h2 class="table-title">最新用户详情</h2>
      <div class="table-wrapper">
        <table class="user-table">
          <thead>
            <tr>
              <th>用户名</th>
              <th>邮箱</th>
              <th>年龄</th>
              <th>性别</th>
              <th>活跃度</th>
              <th>注册时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(user, index) in recentUsers" :key="index">
              <td>{{ user.username }}</td>
              <td>{{ user.email }}</td>
              <td>{{ user.age }}</td>
              <td>{{ user.gender }}</td>
              <td><span class="activity-level" :class="getActivityClass(user.activityRate)">{{ user.activityRate }}%</span></td>
              <td>{{ formatDate(user.registerDate) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟用户数据
      users: [
        { id: 1, username: '张三', email: 'zhangsan@example.com', age: 28, gender: '男', activityRate: 85, registerDate: '2023-01-15', region: '北京' },
        { id: 2, username: '李四', email: 'lisi@example.com', age: 32, gender: '女', activityRate: 78, registerDate: '2023-02-20', region: '上海' },
        { id: 3, username: '王五', email: 'wangwu@example.com', age: 24, gender: '男', activityRate: 92, registerDate: '2023-03-10', region: '广州' },
        { id: 4, username: '赵六', email: 'zhaoliu@example.com', age: 45, gender: '女', activityRate: 65, registerDate: '2023-04-05', region: '深圳' },
        { id: 5, username: '孙七', email: 'sunqi@example.com', age: 38, gender: '男', activityRate: 72, registerDate: '2023-05-18', region: '杭州' },
        { id: 6, username: '周八', email: 'zhouba@example.com', age: 29, gender: '女', activityRate: 88, registerDate: '2023-06-01', region: '成都' },
        { id: 7, username: '吴九', email: 'wujiu@example.com', age: 35, gender: '男', activityRate: 95, registerDate: '2023-07-12', region: '武汉' },
        { id: 8, username: '郑十', email: 'zhengshi@example.com', age: 42, gender: '女', activityRate: 68, registerDate: '2023-08-25', region: '西安' }
      ],
      
      // 模拟统计数据
      totalUsers: 1250,
      activeUsers: 875,
      avgActivityRate: 70,
      userGrowthRate: 15
    }
  },
  computed: {
    // 性别比例数据
    genderPieData() {
      const male = this.users.filter(u => u.gender === '男').length;
      const female = this.users.filter(u => u.gender === '女').length;
      
      return [
        { value: male, name: '男' },
        { value: female, name: '女' }
      ];
    },
    
    // 年龄分布数据
    ageBarData() {
      const ageGroups = [
        { range: '18-25', count: 0 },
        { range: '26-35', count: 0 },
        { range: '36-45', count: 0 },
        { range: '46-55', count: 0 },
        { range: '56+', count: 0 }
      ];
      
      this.users.forEach(user => {
        if (user.age < 26) ageGroups[0].count++;
        else if (user.age < 36) ageGroups[1].count++;
        else if (user.age < 46) ageGroups[2].count++;
        else if (user.age < 56) ageGroups[3].count++;
        else ageGroups[4].count++;
      });
      
      return {
        categories: ageGroups.map(g => g.range),
        data: ageGroups.map(g => g.count)
      };
    },
    
    // 活跃度趋势数据
    activityLineData() {
      return {
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
        rates: [65, 68, 72, 75, 78, 82, 85, 88]
      };
    },
    
    // 用户地域分布数据
    regionMapData() {
      const regions = [
        { name: '北京', value: 220 },
        { name: '上海', value: 185 },
        { name: '广州', value: 150 },
        { name: '深圳', value: 145 },
        { name: '杭州', value: 120 },
        { name: '成都', value: 95 },
        { name: '武汉', value: 85 },
        { name: '西安', value: 75 }
      ];
      
      return regions;
    },
    
    // 最新用户
    recentUsers() {
      return this.users.slice(0, 5);
    }
  },
  computed: {
    genderPieOptions() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['男', '女']
        },
        series: [
          {
            name: '用户性别',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.genderPieData
          }
        ]
      };
    },
    
    ageBarOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.ageBarData.categories,
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
          axisLabel: {
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '用户数量',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '年龄分布',
            type: 'bar',
            barWidth: '60%',
            data: this.ageBarData.data,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#5470c6' },
                { offset: 1, color: '#91cc75' }
              ])
            }
          }
        ]
      };
    },
    
    activityLineOptions() {
      return {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.activityLineData.months,
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '活跃度(%)',
          min: 60,
          max: 95,
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '活跃度趋势',
            type: 'line',
            data: this.activityLineData.rates,
            smooth: true,
            itemStyle: {
              color: '#5470c6'
            },
            lineStyle: {
              width: 4
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
                { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
              ])
            }
          }
        ]
      };
    },
    
    regionMapOptions() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}人'
        },
        visualMap: {
          min: 0,
          max: 250,
          calculable: true,
          inRange: {
            color: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594']
          },
          textStyle: {
            color: '#333'
          }
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#eee',
              borderColor: '#333'
            }
          }
        },
        series: [
          {
            name: '用户分布',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.regionMapData.map(item => ({
              name: item.name,
              value: [item.value]
            })),
            symbolSize: function(val) {
              return val[0] / 10;
            },
            itemStyle: {
              color: '#ff7f50'
            }
          }
        ]
      };
    }
  },
  methods: {
    getActivityClass(rate) {
      if (rate >= 85) return 'high';
      if (rate >= 75) return 'medium';
      return 'low';
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    }
  }
}
</script>

<style scoped>
.user-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #4b6cb7, #182848);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 600;
}

.dashboard-subtitle {
  margin: 10px 0 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  text-align: center;
}

.card-content {
  text-align: center;
}

.card-value {
  font-size: 2rem;
  font-weight: bold;
  color: #4b6cb7;
  margin-bottom: 5px;
}

.card-label {
  font-size: 1rem;
  color: #666;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-title {
  margin: 0 0 20px;
  color: #4b6cb7;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.table-container {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.table-title {
  margin: 0 0 20px;
  color: #4b6cb7;
  font-size: 1.5rem;
}

.table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.user-table th, .user-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.user-table th {
  background-color: #f5f7fb;
  font-weight: 600;
  color: #4b6cb7;
}

.user-table tr:hover {
  background-color: #f9fafb;
}

.activity-level {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.activity-level.high {
  background-color: #e6f7e6;
  color: #2e7d32;
}

.activity-level.medium {
  background-color: #fff8e6;
  color: #f57c00;
}

.activity-level.low {
  background-color: #ffebee;
  color: #c62828;
}

/* 响应式调整 */
@media (max-width: 900px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
  
  .overview-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .overview-cards {
    grid-template-columns: 1fr;
  }
  
  .dashboard-title {
    font-size: 1.8rem;
  }
}
</style>